<style>
    body {
        background-color: #ffffff;
    }
</style>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">图片</label>
        <div class="layui-input-block">
            <div class="layui-btn-group">
                <button class="layui-btn" id="uploadImage">上传</button>
                <img src="" id="icon-img" alt="">
                <input type="hidden" name="img" id="icon">
            </div>
            <div id="progressImg"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            $ = layui.$;
        let uploadInst = upload.render({
            elem: '#uploadImage',
            url: "{:url('upload/file')}",
            field: 'image'
            ,acceptMime:'image/*'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                let index = layer.msg("上传中...",{icon:16,shade:0.5,time:999999})
            }
            , done: function (res) {
                layer.closeAll()
                //如果上传失败
                if (res.code != "{$result.normal}") {
                    return layer.msg(res.msg,{icon:5,shade:0.5});
                }
                $("#icon").val(res.data.url)
                $(".icon-item").slideDown();
                $("#icon-img").attr("src","/"+res.data.url)
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#errorText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            hadmin.http("{:url('save')}",data.field).then(res=>{
                if(res.code == "{$result.normal}"){
                   hadmin.father_reload();
                }
            })

            return false;
        });

    });
</script>
</body>
</html>